<script setup>
import { ref } from 'vue'
const props = defineProps({
	tabIndex: {
		type: Number,
		required: true,
		default: 0,
	},
	labelName: {
		type: String,
		required: true,
		default: 'A',
	}
})
const tabsConfig = ref([
	{title:'政策',key:'policy'},
	{title:'资讯',key:'news'},
	{title:'课件',key:'course'},
	{title:'文献',key:'literature'},
	{title:'其它',key:'other'}
])

</script>

<template>
<div class="wrap">
	<div class="tabs">
		<div class="tab" :class="tabIndex===index?'selected':''"
				 v-for="(item,index) in tabsConfig"
				 :key="item.title"
		>{{item.title}}
		</div>
	</div>
	<div class="content">
		<div class="left">
			<slot name="left"></slot>
		</div>
		<div class="middle">
			<slot name="middle"></slot>
		</div>
		<div class="right">
			<div class="labelName" :class="[labelName==='A'?'selectedA':'']"><span>A</span></div>
			<div class="labelName" :class="[labelName==='S'?'selectedS':'']"><span>S</span></div>
			<div class="labelName" :class="[labelName==='D'?'selectedD':'']"><span>D</span></div>
		</div>
	</div>
</div>
</template>

<style scoped lang="scss">
.wrap{
	width: 850px;
	background: #FFFFFF;
	border-radius: 20px;
	.tabs{
		height: 52px;
		background: #F5F5F5;
		border-radius: 20px 20px 0px 0px;
		display: flex;
		flex-direction: row;
		align-items: center;
		.tab{
			width: 160px;
			text-align: center;
			line-height: 52px;
			font-weight: 430;
			font-size: 16px;
			color: #000000;
			&.selected{
				background: #fff;
				border-radius: 0 20px 0 0;
			}
		}
	}
	.content{
		display: flex;
		flex-direction: row;
		.left{
			border-right: 1px solid #E0E0E0;
			box-sizing: border-box;
			padding: 40px;
			width: 448px;
		}
		.middle{
			flex: 1;
		}
		.right{
			width: 36px;
			display: flex;
			flex-direction: column;
			.labelName{
				display: flex;
				align-items: center;
				justify-content: center;
				flex: 1;
				box-sizing: border-box;
				&.selectedA{
					border-left: 1px solid #EA3A3A;
					color: #EA3A3A;
					background: #FFECEC;
				}
				&.selectedS{
					border-left: 1px solid #33CF4D;
					color: #33CF4D;
					background: #E6FDEA;
				}
				&.selectedD{
					border-left: 1px solid #4566ED;
					color: #4566ED;
					background: #EBEFFF;
				}
			}
		}
	}
}
</style>
